<template>
	<div class="index-goods-search">
		<div class="search-header">
			<div class="sh-back"
				onclick="javascript:history.go(-1)" 
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="sh-content">
				<i class="iconfont">&#xe612;</i>
				<input type="text" 
					placeholder="请输入搜索内容" 
					v-model.trim="keyword"
				>
			</div>
			<div class="sh-btn"
				@click="goSearch()"
			>
				<p>搜索</p>
			</div>
		</div>
		<div class="nav border-1px">
			<ul class="nav-items">
				<li class="nav-item"
					@click="change(1)"
				>
					<p :class="[ isStyle1 ? 'active' : '' ]">最新</p>
				</li>
				<li class="nav-item"
					@click="change(2)"
				>
					<p :class="[ isStyle2 ? 'active' : '' ]">销量<span :class="[ isStyle2 ? [ isLow ? 'high' : 'low' ] : 'gray' ]"></span></p>
				</li>
				<li class="nav-item"
					@click="change(4)"
				>
					<p :class="[ isStyle4 ? 'active' : '' ]">券额<span :class="[ isStyle4 ? [ isLow ? 'high' : 'low' ] : 'gray' ]"></span></p>
				</li>
				<li class="nav-item"
					@click="change(5)"
				>
					<p :class="[ isStyle5 ? 'active' : '' ]">到手价<span :class="[ isStyle5 ? [ isLow ? 'high' : 'low' ] : 'gray' ]"></span></p>
				</li>
			</ul>
		</div>
		<div class="station" id="station"></div>
		<Scroll :on-refresh="onRefresh" 
			:on-infinite="onInfinite" 
			:loadingText = "loadingText" 
			@topshow="topshow"
			:scrollNum="scrollNum"
		>
			<div class="banner" v-if="imgList !== undefined" id="banner">
				<swiper :options="swiperOption">
					<swiper-slide v-for="(img, index) in imgList"
						:key="index"
					>
						<img v-lazy="img" 
							:key="img"
						/>
					</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
			</div>

			<GoodOne :goodsList=goodsList></GoodOne>
		</Scroll>
		<GoTop :goTop="goTop"
            v-show="topclass"
        ></GoTop>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import GoTop from '../components/GoTop.vue'
	import GoodOne from '../components/goods_one.vue'
	import Scroll from '../components/my_scroll.vue'
	export default{
		components: {
			GoTop,
			GoodOne,
			Scroll
		},
		data(){
			return{
				loadingText: '加载中...',
				topclass: false,
				isStyle1: true,
				isStyle2: false,
				isStyle3: false,
				isStyle4: false,
				isStyle5: false,
				isLow: false,
				keyword: this.$route.query.keyword || '',
				page: 1,
				name: 'new',
				scrollNum: 1, 
				sector_id: this.$route.params.id,
				is_coupon: 0,
				goodList: [],
				goodsList: [],
				imgList: [],
				swiperOption: {
		          	pagination: {
		            	el: '.swiper-pagination',
		            	dynamicBullets: true
		          	}
		        },
		        token: window.localStorage.getItem("token"),
		        mobile: ''
			}
		},
		watch: {
		    '$route' (to, from) {
		    	this.$router.go(0);
			}
		},
		beforeMount(){
			if (!this.token) {
				this.$router.push('/auther')
			}
		},
		mounted(){
			axios.post(Http.USERIDEX)
				.then( res => {
					const ret =res.data;
					if(ret.code == 1){
						this.userInfo = ret['data'];
						this.mobile = this.userInfo.mobile;
					}				
				})			
			this.getData()
		},
		methods: {
			goTop: function(){
                document.getElementById("banner").scrollIntoView();
            },
            onRefresh(done) {
            	document.getElementById('help').style.display="none";
	            this.getData();
	            done();
	            Toast({
				    message: '刷新完成',
				    position: 'bottom',
				    duration: 500
				});     
		    },
		    onInfinite(done) {
		    	document.getElementById('help').style.display="none";
		    	document.querySelector('.load-more').style.display = 'block';
		    	let vm = this;
		    	var params = new URLSearchParams();
				params.append('keyword', vm.keyword);
				params.append('page', vm.page);
				params.append('sector_id', vm.sector_id);
				params.append(vm.name, 1);
				axios.post(Http.SECTOR, params).then( res =>{
					var ret = res.data;
					var arr = ret['data']['list'];
					vm.goodsList = vm.goodsList.concat(arr);
					if (arr.length > 9) {
						vm.page ++;
						// this.$el.querySelector('.load-more').style.display = 'none';
						done() // call done
					}else{
						vm.loadingText = "加载完毕";
						setTimeout(hideLoad, 2000);
						function hideLoad (){
							document.querySelector('.load-more').style.display = 'none';
						}
					}
				})
		    },
		    topshow: function(a){
		    	this.topclass = a;
		    },
			goSearch: function(){
				this.keyword = this.keyword;
				this.$router.push({
					path: '',
					query: {
						keyword: this.keyword
					}
				});
			},
			goDetail: function(goods){
				if (!this.mobile) {
					this.$router.push('/bind/phone')
				}else{
					if ( goods.is_tmall == 1 ) {
						this.type = 1
					} else {
						this.type = 2
					}
					this.$router.push({
						path: '/product/detail/' + goods.origin_id,
						query: {
	                        type: this.type,
	                        is_collect: goods.is_collect
						}
					})
				}				
			},
			change: function(type){
				if( type == 1 ){
					this.isStyle1 =true;
					this.isStyle2 =false;
					this.isStyle4 =false;
					this.isStyle5 =false;
					this.name = 'new'
				}else if ( type == 2 ){
					this.isStyle1 =false;
					this.isStyle2 =true;
					this.isStyle4 =false;
					this.isStyle5 =false;
					if( this.isLow == false ){
						this.name = 'sales_up';
						this.isLow = true;
					}else if(this.isLow == true){
						this.name = 'sales_down';
						this.isLow = false;
					}
				}else if ( type == 4 ){
					this.isStyle1 =false;
					this.isStyle2 =false;
					this.isStyle4 =true;
					this.isStyle5 =false;
					if( this.isLow == false ){
						this.name = 'quan_up';
						this.isLow = true;
					}else if(this.isLow == true){
						this.name = 'quan_down';
						this.isLow = false;
					}					
				}else if ( type == 5 ){
					this.isStyle1 =false;
					this.isStyle2 =false;
					this.isStyle4 =false;
					this.isStyle5 =true;
					if( this.isLow == false ){
						this.name = 'price_up';
						this.isLow = true;
					}else if(this.isLow == true){
						this.name = 'price_down';
						this.isLow = false;
					}
				}
				this.getData();
			},
			getData(){
				var params = new URLSearchParams();
				params.append('keyword', this.keyword);
				params.append('page', this.page);
				params.append('sector_id', this.sector_id);
				params.append(this.name, 1);
				axios.post(Http.SECTOR, params).then( res =>{
					var ret = res.data;
					if (ret.code == 1) {
						this.imgList = ret['data']['images'];
						this.goodsList = ret['data']['list'];
						if(this.goodsList.length < 10){
							this.$el.querySelector('.load-more').style.display = 'none';
						}
						document.title = ret.data.sector_info.name;
					}
					
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.index-goods-search{
		.search-header{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 0.6rem;
			padding: 0.14rem 0;
			background: #fff;
			.sh-back{
				position: absolute;
				top: 0;
				left: 0;
				width: 0.88rem;
				height: 0.88rem;
				line-height: 0.88rem;
				text-align: center;
				i{
					font-size: 0.44rem;
				}
			}
			.sh-content{
				display: -webkit-box;
				    display: -webkit-flex;
				        display: -ms-flexbox;
				            display: flex;
				margin: 0 1rem 0 0.88rem;
				background: #eee;
				height: 0.6rem;
				line-height: 0.6rem;
				border-radius: 0.3rem;
				i{
					margin-top: 0.08rem;
					margin-left: 0.2rem;
					margin-right: 0.2rem;
					width: 0.44rem;
					height: 0.44rem;
					line-height: 0.44rem;
				}
				input{
					flex: 1;
					font-size: 0.26rem;
					color: #666;	
				}
			}
			.sh-btn{
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
				height: 0.88rem;
				p{
					margin-top: 0.14rem;
					margin-right: 0.24rem;
					height: 0.6rem;
					line-height: 0.6rem;
					font-size: 0.28rem;
				}
			}
		}
		.banner{
			width: 100%;
			height: 3rem;
			img{
				width: 100%;
				height: 100%;
			}
			.swiper-container{
				height: 3rem;
			}
		}
		.station{
			width: 100%;
			height: 1.66rem;
		}
		.nav{
			position: fixed;
			top: 0.88rem;
			left: 0;
			z-index: 2;
			width: 100%;
			height: 0.8rem;
			line-height: 0.8rem;
			background: #fafafa;
			.nav-items{
				display: flex;
				align-items: center;
				.nav-item{
					flex: 0 0 25%;
					p{
						color: #666;
						&.active{
							color: rgb(255,101,68);
						}
						span{
							display: inline-block;
							margin-left: 0.08rem;
							width: 0.12rem;
							height: 0.8rem;
							vertical-align: top;
							&.gray{
								background: url(../assets/img/paixu_default.png) center center no-repeat;
								background-size: contain;
							}
							&.high{
								background: url(../assets/img/paixu_default_top.png) center center no-repeat;
								background-size: contain;
							}
							&.low{
								background: url(../assets/img/paixu_default_down.png) center center no-repeat;
								background-size: contain;
							}
						}
					}
				}
			}			
		}
	}
</style>